<template>
  <div class="home">
     <div class="head">
      <p>老百姓自营商城</p>
      <input type="text"><button>搜索</button>
     </div>
     <div class="zhong">
      <div><p>生活好物</p></div>
      <div><p>全球购</p></div>
      <div><p>新特药</p></div>
      <div><p>原研药</p></div>
      <div><p>感冒发烧</p></div>
     </div>
     <div class="xinren">
      
     </div>
     <div class="xinpin">
        <div class="xinzuo">
            <p>新品推荐</p>
        </div>
        <div class="xinzuo">
           
        </div>
     </div>
     <div class="lan">
        <div><span>热门推荐</span></div>
           <div><span>新品推荐</span></div>
           <div><span>清凉一夏</span></div>
           <div><span>呵护肠胃</span></div>
     </div>
     <div class="list">
          <div class="xiang" v-for="item in arr" :key="item.id">
            <img :src="item.img" alt="">
            <p>{{ item.jieshao }}</p>
            <span>￥{{ item.price }}</span><button @click="jian(item.id)">-</button>{{ item.num }}<button @click="jia(item.id)">+</button>
          </div>
     </div>
     <button>去结算</button>
     <div class="gowu">
       <ul>
        <li v-for="item in che" :key="item.id"><img :src="item.img" alt=""><span>{{ item.jishan }}</span><span>￥{{ item.price }}</span><button @click="jian2(item.id)">-</button><input type="text" v-model="item.num"><button @click="jia2(item.id)">+</button></li>
       </ul>
       <p>总价：￥{{ zong }}</p>
     </div>
  </div>
  
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  // name: 'HomeView',
  components: {
    // HelloWorld
  },
  data(){
    return{
      arr:[
        {
          id:1,
          lei:'re',
          img:'src/assets/5fa7f450beab68812877e3567acceef.png',
          jieshao:'京都念慈菴',
          price:33.8,
          num:0
        },
        {
          id:2,
          lei:'re',                   
          img:'../assets/0567eef699769339ba902fbf094ff56.png',
          jieshao:'感冒灵颗粒',
          price:15,
          num:0
        },
        {
          id:3,
          lei:'re',                   
          img:'../assets/f0a49974551b4705471b9d6c706b45c.png',
          jieshao:'金嗓子',
          price:13,
          num:0
        },
        {
          id:4,
          lei:'re',
          img:'../assets/9f52512074bd41cfcb756cd6e22bb68.png',
          jieshao:'盏如初燕窝粥',
          price:59,
          num:0
        }
      ],
      che:[],
      shuling:''
    }
  },
  methods:{
     jia(i){
        var a = this.arr.find(item => item.id == i)
          a.num++
        // this.che.forEach(item =>{
        //   if(item)
        // })
        var b = this.che.find(item => item.jieshao == a.jieshao)
        if(b == undefined){
             this.che.push(
             a
          )
        }
        
     },
     jian(id){
       var c = this.arr.find(item => item.id == id)
       if(c.num != 0){
          c.num--
       }
       
     },
     jia2(id2){
      var d = this.che.find(item => item.id = id2)
       d.num++
     },
     jian2(id3){
       var e =this.che.find(item => item.id = id3)
       if(e.num != 0){
          e.num--
       }
     }
  },
  computed:{
    zong(){
      var zongshu = 0
      this.che.forEach(item =>{
        zongshu += item.num * item.price
      })
      return  zongshu
    }
  }
}
</script>
<style>
  * {
      padding: 0;
      margin: auto;
    }
    .home{
      width: 400px;
    }
    .head{
      width: 400px;
      height: 100px;
      background-color: rgb(25, 151, 255);
    }
    .zhong{
      width: 380px;
      height: 120px;
      display: flex;
      flex-direction:row;
    }
    .xinren{
      width: 380px;
      height: 120px;
      background-color:rgb(255, 120, 91);
      border-radius: 20px;
    }
    .xinpin{
      width: 380px;
      height: 200px;
      background-color: rgb(245, 246, 247);
    }
    .xinzuo{
      float: left;
    }
    .xinyou{
      float: right;
    }
    .lan{
      width: 380px;
      height: 50px;
      background-color: rgb(245, 246, 247);
      line-height: 50px;
      display: flex;
      flex-direction:row;
    }
    .list{
      width: 380px;
      height: 400px;
    }
    .xiang{
      width: 185px;
      height: 200px;
      display: inline-block;
    }
    img{
      width: 185px;
      height: 120px;
    }
    
</style>
